<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Check Spinner With Pop Effect</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<svg class="spinner" viewBox="0 0 48 48" role="img" aria-label="A partial ring that rotates and then is shaped as a checkmark, which pops out yielding confetti">
	<g fill="none" stroke="currentcolor" stroke-linecap="round" stroke-width="4">
		<circle class="spinner__worm" cx="24" cy="24" r="22" stroke-dasharray="138.23 138.23" stroke-dashoffset="-51.84" transform="rotate(-119)" />
		<circle class="spinner__pop-end" stroke="var(--light-green)" cx="24" cy="24" r="18" opacity="0" />
		<g fill="currentcolor" stroke="none">
			<circle class="spinner__pop-start" fill="var(--light-green)" cx="24" cy="24" r="20" opacity="0" />
			<g>
				<g class="spinner__pop-dot-group" opacity="0">
					<circle class="spinner__pop-dot" fill="var(--periwinkle)" cx="22" cy="5" r="1.5" />
				</g>
				<g class="spinner__pop-dot-group" opacity="0">
					<circle class="spinner__pop-dot" fill="var(--light-blue)" cx="26" cy="2" r="1.5" />
				</g>
			</g>
			<g transform="rotate(51.43,24,24)">
				<g class="spinner__pop-dot-group" opacity="0">
					<circle class="spinner__pop-dot" fill="var(--orange)" cx="22" cy="5" r="1.5" />
				</g>
				<g class="spinner__pop-dot-group" opacity="0">
					<circle class="spinner__pop-dot" fill="var(--magenta)" cx="26" cy="2" r="1.5" />
				</g>
			</g>
			<g transform="rotate(102.86,24,24)">
				<g class="spinner__pop-dot-group" opacity="0">
					<circle class="spinner__pop-dot" fill="var(--light-green)" cx="22" cy="5" r="1.5"  />
				</g>
				<g class="spinner__pop-dot-group" opacity="0">
					<circle class="spinner__pop-dot" fill="var(--light-teal)" cx="26" cy="2" r="1.5" />
				</g>
			</g>
			<g transform="rotate(154.29,24,24)">
				<g class="spinner__pop-dot-group" opacity="0">
					<circle class="spinner__pop-dot" fill="var(--purple)" cx="22" cy="5" r="1.5" />
				</g>
				<g class="spinner__pop-dot-group" opacity="0">
					<circle class="spinner__pop-dot" fill="var(--magenta)" cx="26" cy="2" r="1.5" />
				</g>
			</g>
			<g transform="rotate(205.71,24,24)">
				<g class="spinner__pop-dot-group" opacity="0">
					<circle class="spinner__pop-dot" fill="var(--light-teal)" cx="22" cy="5" r="1.5" />
				</g>
				<g class="spinner__pop-dot-group" opacity="0">
					<circle class="spinner__pop-dot" fill="var(--light-blue)" cx="26" cy="2" r="1.5" />
				</g>
			</g>
			<g transform="rotate(257.14,24,24)">
				<g class="spinner__pop-dot-group" opacity="0">
					<circle class="spinner__pop-dot" fill="var(--periwinkle)" cx="22" cy="5" r="1.5" />
				</g>
				<g class="spinner__pop-dot-group" opacity="0">
					<circle class="spinner__pop-dot" fill="var(--light-blue)" cx="26" cy="2" r="1.5" />
				</g>
			</g>
			<g transform="rotate(308.57,24,24)">
				<g class="spinner__pop-dot-group" opacity="0">
					<circle class="spinner__pop-dot" fill="var(--purple)" cx="22" cy="5" r="1.5" />
				</g>
				<g class="spinner__pop-dot-group" opacity="0">
					<circle class="spinner__pop-dot" fill="var(--light-teal)" cx="26" cy="2" r="1.5" />
				</g>
			</g>
		</g>
		<path class="spinner__check" d="M 17 25 L 22 30 C 22 30 32.2 19.8 37.3 14.7 C 41.8 10.2 39 7.9 39 7.9" stroke-dasharray="36.7 36.7" stroke-dashoffset="-36.7" />
	</g>
</svg>
<!-- partial -->
  
</body>
</html>
